<template>
  <div>
    <el-header><PersonHeader></PersonHeader></el-header>
    <el-divider></el-divider>
    <el-container class="myCcontainer">
      <el-aside style="width: 300px;height: 100%">
        <PersonPhoto style="background-color: #f4f4f5"></PersonPhoto>
        <PersonMenu style="background-color: #f4f4f5"></PersonMenu>
      </el-aside>
      <el-main>
        <el-collapse v-model="activeNames" @change="handleChange" >
          <el-collapse-item name="1">
            <template slot="title">
              <h2>账号绑定</h2>
            </template>
              <el-alert style="margin-top: 10px;margin-left: 0px"
                  title="完成身份认证才能创建简历。绑定手机号码、完成邮箱验证，可以增加求职反馈的及时性和准确性，从而提高求职成功率"
                  type="info" :closable="false">
              </el-alert>
            <el-card class="box-card" style="margin-top: 10px">
              <el-row :gutter="20">
                <el-col :span="4" >
                  <i class="fa fa-phone fa-5x"></i>
                </el-col>
                <el-col :span="6" >
                  <div><strong>身份认证</strong></div>
                  身份证编号：510124194405156041
                </el-col>
                <el-col :span="10"  >
                  <el-button class="buttonClass" type="info">立即绑定</el-button>
                </el-col>
              </el-row>
            <el-row :gutter="20">
              <el-col :span="4" >
                <i class="fa fa-envelope fa-5x"></i>
              </el-col>
              <el-col :span="6" >
                <div><strong>邮箱</strong></div>
                邮箱验证后，可以通过邮箱随时取回账户密码。
              </el-col>
              <el-col :span="10" >
                <el-button  class="buttonClass" type="info">立即绑定</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4" >
                <i class="fa fa-key fa-5x"></i>
              </el-col>
              <el-col :span="6" >
                <div><strong>手机</strong></div> 未绑定手机号码<br/>
                绑定后可以使用该手机登录账号或找回密码
              </el-col>
              <el-col :span="10" >
                <el-button class="buttonClass" type="info">立即绑定</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4" >
                <i class="fa fa-address-card-o fa-5x"></i>
              </el-col>
              <el-col :span="6" >
                <div><strong>密码</strong></div>已设置<br/>
                用户保护账号信息和登录安全
              </el-col>
              <el-col :span="10" >
                <el-button class="buttonClass" type="info">更改密码</el-button>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="4" >
                <i class="fa fa-weixin fa-5x"></i>
              </el-col>
              <el-col :span="6" >
                <div><strong>社交账号</strong></div>
                用户保护账号信息和登录安全
              </el-col>
              <el-col :span="10" >
                <el-button class="buttonClass" type="info">立即绑定</el-button>
              </el-col>
            </el-row>
            </el-card>
          </el-collapse-item>
        </el-collapse>
      </el-main>
    </el-container>
    <el-footer>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="8" :offset="8">
          <footerx></footerx>
        </el-col>
      </el-row>
    </el-footer>
  </div>
</template>

<script>
import footerx from "../footerx";
import PersonHeader from "./components/PersonHeader";
import PersonMenu from "./components/PersonMenu";
import PersonPhoto from "./components/PersonPhoto";
export default {
  name: "BindAccount",
  components: {PersonPhoto, PersonMenu, PersonHeader, footerx},
  data (){
    return {
      activeNames:["1"],
      form:{
        oldPassword:'',
        newPassword:'',
        newPassword2:'',
        logoImage:''
      }
    }
  },
  methods:{
    handleChange(){

    },
    onSubmit(){

    }
  }
}
</script>

<style scoped>
.myCcontainer{
  margin:0 auto;
  background: azure;
  width: 1200px;
}
.el-main{
  padding: 0px 5px;
}
h2{
  margin: 0px 10px;
}
.buttonClass{
  margin-left: 300px
}
.el-card .el-row{
  margin-top: 20px;
}
/deep/ .el-alert__content{
  margin-left: 0px;
}

</style>